<template>
  <a-card :bordered="false">
    <!-- 快捷查询 -->
    <div class="c-container">
      <a-row>
        <a-col :xl="8" :lg="8" :md="8" :sm="24">
          <a-menu v-model="current" mode="horizontal" @select="selectType">
            <a-menu-item key="submit">
              <span class="title">申请激活</span>
            </a-menu-item>
            <a-menu-item key="silent">
              <span class="title actived">全部</span>
            </a-menu-item>
            <a-menu-item key="delete">
              <span class="title">回收站 </span>
            </a-menu-item>
          </a-menu>
        </a-col>
        <a-col :xl="10" :lg="10" :md="10" :sm="24">
          <div class="searchBox">
            <a-input-search
              placeholder="请输入客户名称/手机/电话"
              v-model="queryParam.customerName"
              enter-button="搜索"
              size="default"
              @keyup.enter.native="searchQuery"
              @search="searchQuery"
            />
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <oufu-scene-slider
        ref="oufuSlider"
        :title="sliderTitle"
        :sceneType="sceneType"
        :columns="columns"
      ></oufu-scene-slider>
      <div>
        <span style="margin: 0 5px">产品品类： </span>
        <j-dict-select-tag
          style="width: 200px"
          placeholder="请选择产品品类"
          v-model="queryParam.productCategory"
          :triggerChange="true"
          @change="productCateChange"
          dictCode="DataDictionary,description,dictionaryId, dictionaryTypeId =PRODUCT_CATEGORY"
        />
      </div>
      <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
          <a-menu-item key="2" @click="handleExportXls('客户表')"><a-icon type="download" />导出</a-menu-item>
        </a-menu>
        <a-button> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown> -->
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{ x: 1300 }"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        class="j-table-force-nowrap"
        @change="handleTableChange"
      >
        <template slot="customerName" slot-scope="text, record">
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{ record.customerName }}</span>
            </template>
            <span class="ellipsis">
              <a @click="() => handleReadDrawer(record)">{{ record.customerName }}</a>
            </span>
          </a-tooltip>
        </template>
        <!-- <span slot="action" slot-scope="text, record">
          <a-button v-if="record.infoStatusId == '1'" @click="handleAcitve(record)">申请激活</a-button>
          <a-divider v-if="record.infoStatusId == '1'" type="vertical" />
        </span> -->
      </a-table>
    </div>
    <crmCustomer-modal-drawer
      ref="modalFormDrawer"
      @handleDelete="handleDelete"
      @handleEdit="handleEdit"
    ></crmCustomer-modal-drawer>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { MonthsBetw, getNowDate, getDaysBetween } from '@/utils/util'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import CrmCustomerModal from './modules/CrmCustomerModal'
import CrmCustomerModalDrawer from './modules/CrmCustomerModal__Style#Drawer'
import OufuSceneSlider from '@/components/jeecg/OufuSceneSlider.vue'
import { httpAction, getAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import DuplicateCheck from './components/DuplicateCheck.vue'

function number_format(number, decimals, dec_point, thousands_sep) {
  /*
   * 参数说明：
   * number：要格式化的数字
   * decimals：保留几位小数
   * dec_point：小数点符号
   * thousands_sep：千分位符号
   * */
  number = (number + '').replace(/[^0-9+-Ee.]/g, '')
  var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = typeof thousands_sep === 'undefined' ? ',' : thousands_sep,
    dec = typeof dec_point === 'undefined' ? '.' : dec_point,
    s = '',
    toFixedFix = function (n, prec) {
      var k = Math.pow(10, prec)
      return '' + Math.ceil(n * k) / k
    }

  s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.')
  var re = /(-?\d+)(\d{3})/
  while (re.test(s[0])) {
    s[0] = s[0].replace(re, '$1' + sep + '$2')
  }

  if ((s[1] || '').length < prec) {
    s[1] = s[1] || ''
    s[1] += new Array(prec - s[1].length + 1).join('0')
  }
  return s.join(dec)
}
export default {
  name: 'SilentIndex',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    CrmCustomerModal,
    CrmCustomerModalDrawer,
    OufuSceneSlider,
    DuplicateCheck,
  },
  props: {
    typeKey: Array,
  },
  data() {
    return {
      sliderTitle: '团队',
      description: '客户表管理页面',
      fieldList: [],
      superQueryFlag: false,
      superQueryParams: '',
      current: ['silent'],
      inputContent: '',
      seasNum: '',

      //场景定义开始
      sceneType: 'CmsCustomer',
      //场景定义结束
      queryParam: {
        // ownerUserId: this.userInfo().userLoginId,
        productCategory: '',
        infoStatusId: '1',
        isManage: 'Y'
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          fixed: 'left',
        },
        {
          title: '客户名称',
          width: 200,
          ellipsis: true,
          align: 'center',
          dataIndex: 'customerName',
          scopedSlots: { customRender: 'customerName' },
          fixed: 'left',
        },
        {
          title: '关联客户',
          width: 200,
          ellipsis: true,
          align: 'center',
          dataIndex: 'relatedCustomer_dictText',
        },
        {
          title: '产品品类',
          width: 200,
          ellipsis: true,
          align: 'center',
          dataIndex: 'productCategory_dictText',
        },
        {
          title: '客户状态',
          width: 200,
          ellipsis: true,
          align: 'center',
          dataIndex: 'infoStatusId_dictText',
        },
        {
          title: '客户经理',
          width: 200,
          ellipsis: true,
          align: 'center',
          sorter: (a, b) => a.ownerUserId_dictText - b.ownerUserId_dictText,
          dataIndex: 'ownerUserId_dictText',
          type: 'list_multi',
          dictUrl: 'listUserLoginBySuperiorId',
        },
        {
          title: '商机类型',
          width: 200,
          ellipsis: true,
          align: 'center',
          dataIndex: 'businessTypId_dictText',
        },
        {
          title: '商机金额',
          width: 200,
          ellipsis: true,
          align: 'center',
          dataIndex: 'businessTotalAmount',
          customRender: function (t, r, index) {
            return number_format(t, 0, '.', ',')
          },
        },
        {
          title: '全温区需求',
          width: 200,
          ellipsis: true,
          align: 'center',
          dataIndex: 'estimatedAll',
          customRender: function (t, r, index) {
            return number_format(t, 0, '.', ',')
          },
        },
        {
          title: '更新时间',
          width: 200,
          ellipsis: true,
          align: 'center',
          dataIndex: 'updateTime',
          sorter: (a, b) => a.updateTime - b.updateTime,
        },
        // {
        //   title: '操作',
        //   width: 175,
        //   dataIndex: 'action',
        //   align: 'center',
        //   scopedSlots: { customRender: 'action' },
        //   fixed: 'right',
        // },
      ],
      url: {
        list: '/online/api/pagingCrmCustomer',
        delete: '/online/api/deleteCrmCustomer',
        deleteBatch: '/online/api/deleteCrmCustomerBatch',
        exportXlsUrl: '/online/api/exportCrmCustomerXls',
        importExcelUrl: '/online/api/importCrmCustomerExcel',
        sceneList: '/online/api/pagingCrmScene',
        createCrmStar: '/online/api/createCrmStar',
        setCrmCustomerStatus: '/online/api/setCrmCustomerStatus',
      },
      dictOptions: {},
    }
  },
  watch: {
    typeKey(val) {
      this.current = val
    },
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    rowClassName(record, index) {
      if (record.infoStatusId == '1') {
        return 'table-color-gray'
      }
    },
    ...mapGetters(['userInfo']),
    initDictConfig() {
      this.getSeasNum()
      const that = this
      this.$bus.on('superParam', function (param) {
        if (param.type == 1) {
          that.superQueryParams = ''
          that.superQueryFlag = false
          if (param.data != 0) {
            that.queryParam.ownerUserIdList = param.data
            that.loadData(1)
          } else {
            delete that.queryParam.ownerUserIdList
            that.loadData(1)
          }
        }
        if (param.type == 2) {
          //高级查询方法
          if (!param.data) {
            that.superQueryParams = ''
            that.superQueryFlag = false
          } else {
            that.superQueryFlag = true
            that.superQueryParams = JSON.stringify(param.data)
          }
          that.loadData(1)
        }
      })
    },
    // 切换
    selectType(e) {
      this.$emit('menu-select', e)
    },
    getSeasNum() {
      getAction(this.url.list, { ownerUserId: 'public' }).then((res) => {
        this.seasNum = res.result.total
      })
    },
    productCateChange(e) {
      this.queryParam.productCategory = e
      this.loadData()
    },
    handleReadDrawer(record) {
      record.isEditCustomer = false
      this.handleViewDrawer(record)
    },
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/pageHead.css';
.c-container .actived {
  color: #168a40;
}
.c-container .ant-menu-item-active {
  border-bottom-color: #168a40;
}
.c-container .ant-menu-item-selected {
  border-width: 3px;
  border-bottom-color: #168a40;
}

.tips {
  display: inline-block;
  position: absolute;
  left: 25px;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  background-color: #168a40;
  color: #fff;
}
</style>
<style lang="less" scoped>
/deep/ .ant-input-search-button {
  background-color: #168a40;
  border-color: #168a40;
}
.ellipsis {
  width: 184px;
}
</style>
